import React,{useState,useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import { PageHeader, Pagination, List, message } from 'antd';
import style from "./index.module.css"
import { get } from '../../util/get';
import OrderVos from '../../components/OrderVos';
/**
 * header -> 我的订单
 * 
 */
export default function OrderList() {
  const navigate = useNavigate()
  const [list,setList]=useState([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [refresh,setRefresh]  = useState(false)
  const token = localStorage.getItem('TOKEN')
  useEffect(()=>{
    get(`/order/order/list?page=${page}&limit=5`,token).then(res=>{
      const {code,page:{list,totalCount},msg} = res.data
      console.log(res);
      if(!code){
        setList(list)
        setTotal(totalCount)
      }
      else message.error(msg)
    })
  },[token,page,refresh])
  return (
    <div>
      <PageHeader
        className={`site-page-header ${style.header}`}
        onBack={() => { navigate('/home') }}
        title={'我的订单'}
        subTitle={`共${total}条订单`}
      />
      <div className={style.address_c}>
        <List
          className={style.addresslist}
          itemLayout="horizontal"
          bordered
          dataSource={list}
          renderItem={(item) => {
            return (
              <OrderVos r={refresh} setR={setRefresh} type={0} data = {item}></OrderVos>
            )
          }}
        />
      </div>
      <div className ={style.paginationBox}>
      <Pagination
          className={style.pagination}
          current={page} defaultPageSize={5}
          total={total} onChange={page => {
            setPage(page);
          }} />
      </div>
     
    </div>
  )
}
